<template>
  <div>
    <div class="tableFiltersWrap">
      <div class="lcbrwgl-header">
        <div style="display: flex; align-items: center; justify-content: space-between; height: 48px">
          <div @click="$emit('back')" class="title">
            <i class="el-icon-back" style="font-size: 22px; cursor: pointer; margin-right: 12px"></i>
            {{ info.statDate }}{{ info.codeType == '1' ? '个人账单' : info.codeType == '2' ? '加班餐账单' : '日账单' }}详情
          </div>
        </div>
        <div>
          <!-- 条件-->
          <el-row class="txt-right">
            <el-col>
              <v-form :fields="fields" :fieldsData="tableParams" :label-width="75">
                <el-col :span="6" class="txt-left" style="margin-left: 80px">
                  <el-button type="primary" @click="fecthData">查询</el-button>
                  <el-button type="default" @click="reloadData">清空</el-button>
                  <v-export-btn2 :download="exportList" :columns="columns" :fileName="fileName" type="primary" size="middle"></v-export-btn2>
                </el-col>
              </v-form>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <v-page>
      <el-card shadow="never" class="card-header-tabs">
        <div class="text item">
          <basic-table ref="basicTable" :columns="columns" :call-server="callServer" @selectionChange="selectionChange" :height="height" v-model="tableParamsCopy"></basic-table>
        </div>
      </el-card>
    </v-page>
  </div>
</template>

<script>
import { detail, exportDetail, dropDown, person } from '#/api/billSheet';
import basicTable from '_c/tables';
import moment from 'moment';

export default {
  props: {
    info: Object,
  },
  components: {
    basicTable,
  },
  data() {
    return {
      tableParams: {
        date: [new Date(), new Date()],
        xm: '',
        xh: '',
        deviceName: '',
        amount: '',
        amountRange: {},
      },
      multipleSelection: [],
      currentItem: {},
      height: window.innerHeight - 320,
      statData: {},
      mode: 1,
      deviceList: []
    };
  },
  created() {
    window.addEventListener('resize', this.handleResize);
    dropDown().then(res => {
      this.deviceList = res.data.map(d => ({ label: d.name, value: d.code }));
    });
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize);
  },
  computed: {
    fileName() {
      if (this.info.codeType == '1') {
        return this.info.statDate + '个人账单详情';
      } else if (this.info.codeType == '2') {
        return this.info.statDate + '加班餐账单详情';
      } else {
        return this.info.statDate + '日账单详情';
      }
    },
    tableParamsCopy() {
      const params = {
        startDate: moment(this.info.statDate).format('YYYY-MM-DD'),
        endDate: moment(this.info.statDate).format('YYYY-MM-DD'),
      };
      if (this.info.codeType) {
        params.codeType = this.info.codeType;
      }
      if (this.tableParams.xm) {
        params.xm = this.tableParams.xm;
      }
      if (this.tableParams.xh) {
        params.xh = this.tableParams.xh;
      }
      if (this.tableParams.deviceNo) {
        params.deviceNo = this.tableParams.deviceNo;
      }
      if (this.tableParams.amountRange.max) {
        params.amountMax = this.tableParams.amountRange.max;
      }
      if (this.tableParams.amountRange.min) {
        params.amountMin = this.tableParams.amountRange.min;
      }
      if (this.tableParams.sd) {
        params.sd = this.tableParams.sd;
      }
      if (this.tableParams.codeType) {
        params.codeType = this.tableParams.codeType;
      }
      return params;
    },
    fields() {
      if (this.info.codeType) {
        return [
          {
            label: '姓名',
            prop: 'xm',
            type: 'text',
            span: 6,
            placeholder: '请输入姓名',
          },
          {
            label: '学工号',
            prop: 'xh',
            type: 'text',
            span: 6,
            placeholder: '请输入学工号',
          },
        ]
      } else {
        return [
          {
            label: '姓名',
            prop: 'xm',
            type: 'text',
            span: 6,
            placeholder: '请输入姓名',
          },
          {
            label: '学工号',
            prop: 'xh',
            type: 'text',
            span: 6,
            placeholder: '请输入学工号',
          },
          {
            label: '记账设备',
            prop: 'deviceNo',
            type: 'select',
            span: 6,
            placeholder: '请选择记账设备',
            options: this.deviceList
          },
          {
            label: '消费金额',
            prop: 'amountRange', // 绑定的是一个对象，如 { min: 0, max: 100 }
            type: 'numberrange', // 自定义类型（需在动态表单渲染逻辑中处理）
            span: 6,
            children: [
              {
                prop: 'min',
                type: 'text',
                placeholder: '最小金额',
              },
              {
                prop: 'max',
                type: 'text',
                placeholder: '最大金额',
              },
            ],
          },
          {
            label: '记账时段',
            prop: 'sd', // 绑定的是一个对象，如 { min: 0, max: 100 }
            type: 'select', // 自定义类型（需在动态表单渲染逻辑中处理）
            span: 6,
            options: [
              { value: '1', label: '早餐' },
              { value: '2', label: '中餐' },
              { value: '3', label: '加班餐' },
            ],
          },
          {
            label: '记账类型',
            prop: 'codeType',
            type: 'select',
            span: 6,
            placeholder: '请选择记账类型',
            options: [
              { value: 1, label: '个人码' },
              { value: 2, label: '客餐码' },
            ],
          },
        ];
      }
    },
    columns() {
      if (this.info.codeType == '1') {
        return [
          {
            label: '姓名',
            prop: 'xm',
          },
          {
            label: '学工号',
            prop: 'xh',
          },
          {
            label: '早餐',
            prop: 'breakfastAmount',
          },
          {
            label: '中餐',
            prop: 'lunchAmount',
          },
          {
            label: '合计数额',
            prop: 'grTotalAmount',
          },
          {
            label: '客餐码使用额',
            prop: 'kcmTotalAmount',
          },
          {
            label: '记账日期',
            prop: 'statDate'
          },
        ];
      } else if (this.info.codeType == '2') { 
        return [
          {
            label: '姓名',
            prop: 'xm',
          },
          {
            label: '学工号',
            prop: 'xh',
          },
          {
            label: '加班餐',
            prop: 'amount',
          },
          {
            label: '记账日期',
            prop: 'createTime',
            render: () => {
              return <div>{this.info.statDate}</div>;
            },
          },
        ]
      } else {
        return [
          {
            label: '姓名',
            prop: 'xm',
          },
          {
            label: '学工号',
            prop: 'xh',
          },
          {
            label: '记账设备',
            prop: 'deviceName',
          },
          {
            label: '记账数额',
            prop: 'amount',
          },
          {
            label: '记账时段',
            prop: 'createTimeStr',
          },
          {
            label: '记账类型',
            prop: 'codeTypeStr'
          },
        ];
      }
    },
  },
  methods: {
    handleResize() {
      this.height = window.innerHeight - 320;
    },
    callServer() {
      return this.info.codeType == 1 ? person : detail;
    },
    fecthData() {
      this.$refs.basicTable.fecthData();
    },
    reloadData() {
      this.tableParams = {
        xm: '',
        xh: '',
        deviceName: '',
        amount: '',
        amountRange: {},
      };      
      this.$refs.basicTable.reload();
    },
    selectionChange(val) {
      this.multipleSelection = val;
    },
    handleNodeClick(node) {
      if (node.children) {
        this.currentNode = node;
        this.fecthData(node.id);
      }
    },
    exportList(columns, filename) {
      exportDetail({ ...this.tableParamsCopy, excelDtos: columns }, filename);
    },
  },
};
</script>

<style lang="scss" scoped>
.lcbrwgl-header {
  padding: 0px 16px 0 16px;
  background: #fff;
  flex-grow: 0;
  flex-shrink: 0;
  margin-top: -12px;
  .title {
    display: flex;
    align-items: center;
    font-size: 18px;
  }
}
</style>
